<template>
  <div class="departments-container">
    <div class="app-container">
      <el-card v-loading="isLoading" class="tree-card">
        <!-- 用了一个行列布局 -->
        <el-row
          v-model="company"
          type="flex"
          justify="space-between"
          align="middle"
          style="height: 40px"
        >
          <el-col :span="20">
            <span>{{ company.name }}</span>
          </el-col>
          <el-col :span="4">
            <el-row type="flex">
              <!-- 两个内容 -->
              <el-col :span="12">{{ company.manage }}</el-col>
              <el-col :span="12">
                <!-- 下拉菜单 element -->
                <el-dropdown>
                  <span> 操作<i class="el-icon-arrow-down" /> </span>
                  <!-- 下拉菜单 -->
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="addDepts(company)"
                      >添加子部门</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-tree :data="departs" :props="defaultProps">
          <!-- v-slot简写# -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%"
            >
              <el-col :span="20">
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex">
                  <!-- 两个内容 -->
                  <el-col :span="12">{{ data.manager }}</el-col>
                  <el-col :span="12">
                    <!-- 下拉菜单 element -->
                    <!-- @command 给三个el按钮绑定点击事件,这是el组件提供的方法,也可以自己写三个点击事件,但是需要加native -->
                    <el-dropdown trigger="click" @command="deldepartment($event, data)">
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <!--command 是用来监听点击的哪个按钮  -->
                        <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                        <el-dropdown-item command="edit">修改子部门</el-dropdown-item>
                        <el-dropdown-item command="del">删除子部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-tree>
      </el-card>
      <!-- .sync vuejs为我们提供了sync修饰符，可以在子组件中用固定语法对数据进行更改,省略了子传父的过程-->
      <!-- 固定语法:this.$emit('update:父组件加修饰符的值',你要修改的值) -->
      <add-dept
        ref="addDept"
        :peoples="peoples"
        :show-dialog.sync="showDialog"
        :node-data="nodeData"
        :depts-list="deptsList"
        @close-dialog="handCloseDialog"
        @add-depts="getRrganizerStaff"
      />
    </div>
  </div>
</template>

<script>
import { getRrganizerStaffApi, delDepartmentApi } from '@/api/departments'
import { findLeader } from '@/utils/index'
import { getDepPrincipalApi } from '@/api/employees'

import addDept from '@/views/departments/components/add-dept.vue'
export default {
  name: 'Departments',
  components: {
    addDept // 引入添加部门弹窗
  },
  data() {
    return {
      // 部门列表人员详情
      departs: [],
      company: {
        id: '',
        name: '',
        manage: '负责人',
        children: []
      },
      defaultProps: {
        label: 'name'
      },
      showDialog: false,
      nodeData: {},
      deptsList: [], // 还没有被排成树形的数据
      // 定义数组接收负责人下拉菜单
      peoples: [],
      isLoading: false

      // // 可以将后端的规定参数改名字
      // defaultProps: {
      //   // label改成自己想要的名字
      //   label: 'name'
      // }
      // 可以将后端的规定参数改名字
    }
  },
  // 也可以通过计算属性修改title
  // computed: {
  //   showTitle() {
  //     return this.form.id ? '编辑部门' : '新增部门'
  //   }
  // },
  created() {
    // 加载动画开始
    this.isLoading = true
    // 调用部门列表函数
    this.getRrganizerStaff()
  },
  methods: {
    // 获取部门列表
    async getRrganizerStaff() {
      const { data: res } = await getRrganizerStaffApi()
      this.deptsList = res.data.depts
      this.company.name = '阿伟部下'
      // 调用递归
      this.departs = findLeader(res.data.depts, '')
      this.isLoading = false
    },
    // 验证点击
    deldepartment(command, data) {
      // 点击增加
      if (command === 'add') {
        this.addDepts(data)
      }
      // 点击修改
      if (command === 'edit') {
        // 调用修改部门方法
        this.editDepts(data)
      }
      // 点击删除
      if (command === 'del') {
        // 删除操作
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await delDepartmentApi(data.id)
            // 重新刷新页面
            this.getRrganizerStaff()
            this.$message('删除成功')
          })
          .catch(() => {
            this.$message('已取消删除')
          })
      }
    },
    handCloseDialog() {
      this.showDialog = false
    },
    // 添加部门方法
    addDepts(data) {
      this.showDialog = true
      // 点击公司的添加子部门的时候,也会判断公司名名和code,所以给company添加children属性
      this.company.children = this.departs
      // 在父组件修改子组件数据
      this.$refs.addDept.showTitle = '添加部门'
      // 弹框显示的时候调用获取负责人下拉框
      this.getDepPrincipal()
      this.nodeData = data
    },
    // 封装添加列表里的负责人下拉菜单
    async getDepPrincipal() {
      const { data: res } = await getDepPrincipalApi()
      this.peoples = res.data
    },
    // 修改部门方法
    editDepts(data) {
      // 显示窗口是一个异步的更新
      this.showDialog = true
      this.nodeData = data
      this.$refs.addDept.showTitle = '编译部门'
      // 弹框显示的时候调用获取负责人下拉框
      this.getDepPrincipal()
      this.$nextTick(() => {
        // 执行这里说明异步DOM更新已经完成了
        this.$refs.addDept.getDepartmentMessage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url('~@/assets/common/add-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url('~@/assets/common/minus-circle.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url('~@/assets/common/user-filling.png') no-repeat 0 0;
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
